<template>
    <div>
      <!-- 在右上角添加资源管理文本 -->
      <div class="resource-manage-title">资源管理</div>
  
      <div class="form-container">
        <!-- 增加资源按钮 -->
        <el-button type="primary" @click="openAddDialog">增加资源</el-button>
        <!-- 删除资源按钮 -->
        <el-button type="danger" @click="confirmDelete" :disabled="!multipleSelection.length">删除资源</el-button>
        <!-- 搜索输入框 -->
        <el-input placeholder="搜索资源名称" v-model="search.name" class="search-input"></el-input>
        <!-- 查询按钮 -->
        <el-button type="primary" @click="searchResources">查询</el-button>
      </div>
      <div class="content">
        <!-- 资源树 -->
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          class="resource-tree">
        </el-tree>
        <!-- 资源表格 -->
        <el-table
          :data="filteredResources"
          style="width: 100%"
          ref="resourceTable"
          @selection-change="handleSelectionChange"
          highlight-current-row>
          <!-- 表格列：选择框 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <!-- 表格列：资源名称 -->
          <el-table-column prop="name" label="资源名称" width="180"></el-table-column>
          <!-- 表格列：URL -->
          <el-table-column prop="url" label="URL" width="180"></el-table-column>
          <!-- 表格列：API -->
          <el-table-column prop="api" label="API" width="180"></el-table-column>
          <!-- 表格列：资源编号 -->
          <el-table-column prop="resourceCode" label="资源编号" width="180"></el-table-column>
          <!-- 表格列：顺序编号 -->
          <el-table-column prop="order" label="顺序编号" width="120"></el-table-column>
          <!-- 表格列：操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button size="mini" @click="openEditDialog(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 对话框：用于增加和修改资源 -->
      <el-dialog :visible.sync="isDialogOpen" :title="dialogTitle">
        <el-form :model="form">
          <!-- 表单项：资源名称 -->
          <el-form-item label="资源名称" required>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <!-- 表单项：URL -->
          <el-form-item label="URL" required>
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <!-- 表单项：API -->
          <el-form-item label="API" required>
            <el-input v-model="form.api"></el-input>
          </el-form-item>
          <!-- 表单项：资源编号 -->
          <el-form-item label="资源编号" required>
            <el-input v-model="form.resourceCode"></el-input>
          </el-form-item>
          <!-- 表单项：顺序编号 -->
          <el-form-item label="顺序编号" required>
            <el-input v-model="form.order"></el-input>
          </el-form-item>
          <!-- 表单项：打开图标 -->
          <el-form-item label="打开图标">
            <el-input v-model="form.openIcon"></el-input>
          </el-form-item>
          <!-- 表单项：关闭图标 -->
          <el-form-item label="关闭图标">
            <el-input v-model="form.closeIcon"></el-input>
          </el-form-item>
          <!-- 表单项：子系统 -->
          <el-form-item label="子系统">
            <el-input v-model="form.subsystem"></el-input>
          </el-form-item>
          <!-- 表单项：父亲节点 -->
          <el-form-item label="父亲节点">
            <el-input v-model="form.parentNode"></el-input>
          </el-form-item>
          <!-- 表单项：叶子节点 -->
          <el-form-item label="叶子节点">
            <el-input v-model="form.leafNode"></el-input>
          </el-form-item>
          <!-- 表单项：资源类型 -->
          <el-form-item label="资源类型">
            <el-input v-model="form.resourceType"></el-input>
          </el-form-item>
          <!-- 表单项：是否隐藏 -->
          <el-form-item label="是否隐藏">
            <el-switch v-model="form.isHidden"></el-switch>
          </el-form-item>
          <!-- 表单项：备注 -->
          <el-form-item label="备注">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-form>
        <!-- 对话框底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDialogOpen = false">取消</el-button>
          <el-button type="primary" @click="saveResource">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  

  <style scoped>
  .toolbar {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  .search-input {
    width: 200px;
    margin-right: 10px;
  }
  .resource-manage-title {
    position: absolute;
    top: 10px;
    left: 10px;
    color: blue;
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
  }
  .form-container {
    margin-top: 20px;
  }
  .content {
    display: flex;
  }
  .resource-tree {
    width: 20%;
    margin-right: 20px;
  }
  </style>
  
<script>
  export default {
    name: "ResourceManage",
    data() {
      return {
        /**
         * 成员属性
         */
        resources: [], // 存储所有资源数据的数组，初始为空
        filteredResources: [], // 存储过滤后的资源数据，用于显示在表格中
        treeData: [], // 存储树形结构数据，初始为空
        multipleSelection: [], // 存储选中的资源数据
        isDialogOpen: false, // 控制对话框的显示状态，初始为关闭状态
        dialogTitle: "增加资源", // 对话框的标题，初始为"增加资源"
        form: { // 表单数据模型，用于添加或编辑资源的信息
          name: '',
          url: '',
          api: '',
          resourceCode: '',
          order: '',
          openIcon: '',
          closeIcon: '',
          subsystem: '',
          parentNode: '',
          leafNode: '',
          resourceType: '',
          isHidden: false,
          remark: ''
        },
        search: { // 搜索条件模型，用于过滤资源列表
          name: ''
        },
        defaultProps: { // 树形结构的默认属性
          children: 'children',
          label: 'name'
        },
        initialized: false // 用于判断是否已加载初始数据
      };
    },
    methods: {
      /**
       * 相应界面事件的 handle
       */
      openAddDialog() {
        // 重置表单数据
        this.resetForm();
        // 设置对话框标题为"增加资源"
        this.dialogTitle = "增加资源";
        // 打开对话框
        this.isDialogOpen = true;
      },
      openEditDialog(resource) {
        // 加载要编辑的资源数据到表单
        this.form = { ...resource };
        // 设置对话框标题为"修改资源"
        this.dialogTitle = "修改资源";
        // 打开对话框
        this.isDialogOpen = true;
      },
      saveResource() {
        console.log('Saving data', this.form);
        if (this.dialogTitle === "增加资源") {
          // 添加新的资源到数组的开头
          this.resources.unshift({ ...this.form, id: Date.now() });
          this.$message.success('添加资源成功');
        } else if (this.dialogTitle === "修改资源") {
          const index = this.resources.findIndex(res => res.id === this.form.id);
          if (index !== -1) {
            // 移除旧的资源并添加修改后的资源到数组的开头
            this.resources.splice(index, 1, { ...this.form });
            this.$message.success('修改资源成功');
          }
        }
        // 关闭对话框
        this.isDialogOpen = false;
        // 重新应用搜索条件
        this.searchResources();
      },
      fetchResources() {
        console.log('Fetching data for', this.search);
        // 根据搜索条件过滤资源列表
        this.applySearch();
      },
      applySearch() {
        const { name } = this.search;
        // 根据名称过滤资源列表
        this.filteredResources = this.resources.filter(resource => {
          return (!name || resource.name.includes(name));
        });
      },
      searchResources() {
        // 应用搜索条件过滤资源
        this.applySearch();
      },
      handleNodeClick(node) {
        console.log('Node clicked', node);
      },
      handleSelectionChange(val) {
        // 存储选中的资源
        this.multipleSelection = val;
      },
      confirmDelete() {
        // 弹出确认删除的对话框
        this.$confirm('确定删除选中的资源吗?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 用户确认删除
          this.deleteResources();
        }).catch(() => {
          // 用户取消删除
        });
      },
  
      /**
       * handle 调用的业务方法
       */
      deleteResources() {
        // 获取选中的资源ID
        const selectedIds = this.multipleSelection.map(item => item.id);
        console.log('Deleting resources', selectedIds);
        // 过滤掉选中的资源
        this.resources = this.resources.filter(resource => !selectedIds.includes(resource.id));
        // 更新显示的数据
        this.filteredResources = this.resources;
        this.$message.success('删除成功');
      },
      resetForm() {
        // 重置表单数据
        this.form = {
          name: '',
          url: '',
          api: '',
          resourceCode: '',
          order: '',
          openIcon: '',
          closeIcon: '',
          subsystem: '',
          parentNode: '',
          leafNode: '',
          resourceType: '',
          isHidden: false,
          remark: ''
        };
      },
      initializeResources() {
        if (!this.initialized) {
          // 初始化资源数据
          this.resources = [
            { id: 1, name: 'Resource 1', url: '/resource1', api: '/api/resource1', resourceCode: 'R001', order: 1 },
            { id: 2, name: 'Resource 2', url: '/resource2', api: '/api/resource2', resourceCode: 'R002', order: 2 },
            { id: 3, name: 'Resource 3', url: '/resource3', api: '/api/resource3', resourceCode: 'R003', order: 3 },
            { id: 4, name: 'Resource 4', url: '/resource4', api: '/api/resource4', resourceCode: 'R004', order: 4 },
            { id: 5, name: 'Resource 5', url: '/resource5', api: '/api/resource5', resourceCode: 'R005', order: 5 }
          ];
          this.initialized = true;
        }
      }
    },
    mounted() {
      // 组件挂载后初始化资源数据
      this.initializeResources();
      // 初始化树形数据
      this.treeData = [
        {
          id: 1,
          name: 'Node 1',
          children: [
            {
              id: 2,
              name: 'Node 1-1'
            }
          ]
        }
      ];
    }
  }
  </script>
  
  
 